<template>
  <el-card>
    <el-card class="search-condition-card">
      <el-form v-model="searchForm" ref="searchFormRef" label-width="5vw">
        <!-- 这里可以根据实际需求添加各种搜索条件输入框，以下只是示例 -->
        <el-form-item label="登录用户名">
          <el-input
            v-model.trim="searchForm.adminName"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.result" placeholder="请选择登录状态">
            <el-option label="请选择登录状态" value=""></el-option>
            <el-option label="已登录" value="1"></el-option>
            <el-option label="未登录" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" width="50" label="编号"> </el-table-column>
      <el-table-column prop="adminName" label="用户名"> </el-table-column>
      <el-table-column label="登录状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.result === '1' ? 'success' : 'danger'">
            {{ scope.row.result === '1' ? '已登录' : '未登录' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="clientType" label="操作系统"></el-table-column>
      <el-table-column prop="ip" label="IP"> </el-table-column>
      <el-table-column prop="loginTime" label="登录时间"> </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import { getLoginLog } from '@/api/loginLog'

export default {
  data () {
    return {
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 1,
      currentPage4: 1,
      searchForm: {
        adminName: '',
        result: ''
      }
    }
  },
  methods: {
    getLoginLog () {
      getLoginLog(this.page, this.pageSize, this.searchForm.adminName, this.searchForm.result).then((data) => {
        if (data.code === 1 && data.data) {
          this.total = data.data.total
          this.tableData = data.data.rows.map(item => ({
            ...item,
            result: item.result ? item.result.toString() : '0'
          }))
        } else {
          this.tableData = []
          this.total = 0
        }
        console.log('处理后的数据：', this.tableData)
      }).catch(error => {
        console.error('获取数据失败：', error)
        this.tableData = []
        this.total = 0
        this.$message.error('获取数据失败')
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getLoginLog()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getLoginLog()
    },
    handleSearch () {
      this.page = 1 // 搜索时重置页码
      this.getLoginLog()
    }
  },
  created () {
    this.getLoginLog()
  }
}
</script>

<style scoped>
.search-condition-card {
  margin-bottom: 1vw;
}

.search-condition-card .el-form {
  display: flex;
}

.search-condition-card .el-form-item {
  width: 18vw;
  margin: 0;
}
</style>
